<template>
  <div class="loading-with-content w-100p h-100p">
    <n-spin v-show="loading" :show="loading" :rotate="rotate" :class="[spinClass]">
      <template #icon>
        <slot name="loading-icon"></slot>
      </template>
      <template #description>
        <slot name="loading-description"></slot>
      </template>
    </n-spin>
    <div v-show="!loading" :class="['content-wrapper', contentClass]">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
  interface Props {
    loading: boolean;
    rotate?: boolean;
    contentClass?: string;
    spinClass?: string;
  }

  withDefaults(defineProps<Props>(), {
    loading: false,
    rotate: false,
    contentClass: '',
    spinClass: '',
  });
</script>

<style lang="scss" scoped></style>
